<template>
	<view>
		<view style="margin-bottom: 30rpx;">
			<!-- 放组件 -->
			<home v-if="PageCur==0" ref="home" :scrollTop='scrollTop'></home>
			<mine v-if="PageCur==2" ref="mine"></mine>
		</view>
		<view class="occupi"></view>
		<view class="tabbar">
			<view :class="PageCur == index?'tabcli':''" v-for="(item,index) in tabbar" :key="index"
				@tap="PageCur = index">
				<image class="tab-img" mode="widthFix" :src="item.url + [PageCur == index?'cli':''] + '.png'"></image>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	// 引入组件
	import home from '@/pages/home/home'
	import mine from '@/pages/mine/mine'
	export default {
		data() {
			return {
				scrollTop:0,
				PageCur: 2, //tab下标
				tabbar: [{ //tab数据
						name: '首页',
						url: '/static/images/tabbar/home',
					},
					{
						name: '发现',
						url: '/static/images/tabbar/find',
					},
					{
						name: '我的',
						url: '/static/images/tabbar/mine',
					}
				]
			};
		},
		onPageScroll(e){
			console.log(e);
			this.scrollTop = e.scrollTop
		},
		components: {
			// 注册组件
			home,
			mine,
		},
	};
</script>

<style lang="scss" scoped>
	.occupi {
		width: 750rpx;
		min-height: 90rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbar {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 750rpx;
		min-height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		box-shadow: 4rpx -4rpx 10rpx 0rpx rgba(0,0,0,0.06);
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 11;
		
		font-size: 22rpx;
		color: #323232;

		view {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
			}
		}

		.tabcli {
			color: #C42E3B;
		}
	}
</style>
